import React, { useEffect, useState, memo, useRef } from 'react';
import { Toast } from 'antd-mobile'
import { connect } from 'react-redux';
import ApiIndex from '@/api/notice';
import HeadTop from '@/components/HeadTop';
import { iconMap, MENULIST } from './const';
import "./index.less"

const MenuItems = memo(({ history, item }) => {
    const linkPage = () => {
        if (item.disabled) {
            Toast.show({
                content: '暂未开放',
            })
            return
        }

        history.push("/" + item.path + '?title=' + item.label)
       
    }
    return (
        <div className="m-list-bar" key={item.id} onClick={linkPage}>
            <img src={iconMap[item.icon]} alt="" />
            <span>{item.label}</span>
        </div>
    )
})

function Index({ history, site, sitename }) {
    const [newNotice, setNewNotice] = useState('');
    useEffect(() => {
        getNoticeLast()
    }, [])

    const getNoticeLast = () => {
        ApiIndex.getLatestUnread().then(res => {
            if (res.data.code == 0) {
                setNewNotice(res.data?.data?.content)
            }
        })
    }
    return (
        <div className='page-wrapper'>
            <HeadTop
                title="审批列表"
                history={history}
            ></HeadTop>
            <div className="menu-content1">
                {
                    MENULIST.length && MENULIST.map(el =>
                        <div className="menu-line" key={el.id}>
                            <div className='menu-tit'> {el.label}</div>
                            <div className="menu-list" >
                                {
                                    el.children.map(ej => <MenuItems item={ej} key={ej.id} history={history}></MenuItems>)
                                }
                            </div>

                        </div>
                    )
                }
            </div>
        </div>
    );
}

const mapStateToProps = (state) => {
    return {
        site: state.site,
        sitename: state.sitename
    };
};

export default connect(mapStateToProps)(Index);
